<template>
  <el-form-item :label="labelName">
    <el-select @change="sendName" clearable v-model="cityName" placeholder="请输入关键字搜索" filterable>
      <!-- :filter-method="dataFilter" -->
      <el-option
        v-for="(item,index) in citylist"
        :key="index.name"
        :label="item.name"
        :value="index"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
import city from "../libs/city.js";
export default {
  name: "CitySelect",
  data() {
    return {
      cityName: "",
      citylist: city
    };
  },

  props: ["p_value", ":p_name", "labelName"],
  created() {},
  methods: {
    dataFilter(val) {
      if (val) {
        this.cityName = "";
        let s = setTimeout(() => {
          this.citylist = [];
          let temp = city.filter(item => {
            if (
              pinyinUtil.getFirstLetter(item.name).indexOf(val.toUpperCase()) !=
              -1
            ) {
              return true;
            }
          });
          this.citylist = temp;
          clearTimeout(s);
        }, 500);
      } else {
        this.citylist = city;
      }
      console.log(this.citylist);
    },
    sendName(index) {
      let item = this.citylist[index];
      if (item) {
        this.$emit("update:p_value", item.name);
        this.$emit("update:p_name", item.name);
      } else {
        this.$emit("update:p_value", "");
        this.$emit("update:p_name", "");
      }
    }
  }
};
</script>

